<template>
    <div class="examiner">
        <div class="title">
            {{title}}
        </div>
        <div class="form">
            <div class="form-item" v-for="(item, index) in formModel" :key="index">
                <text class="title">
                    <text v-if="required" class="required">*</text>
                    {{item.title}}
                </text>
                <div class="checkbox">
                    <uni-data-checkbox mode="tag" v-model="item['check']" :localdata="item.list" @change="handleChange"></uni-data-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import examinerData from './examiner'
    export default {
        options: {
            styleIsolation: 'shared'
        },
        props: {
            modelValue: { // 绑定数据
                type: Object,
                default: () => ({})
            },
            title: {
                type: String,
                default: '考官信息'
            },
            required: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                formModel: [...examinerData]
            }
        },
        created() {
            this.init()
        },
        mounted() {
            this.handleChange()
        },
        methods: {
            init(){
                this.formModel.forEach(item => item.check = '')
            },
            handleChange(){
                const modelData = {}
                this.formModel.forEach(item => {
                    modelData[item.field] = item.check
                })
                this.$emit('update:modelValue', modelData)
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .examiner{
        .title{
            color: #333;
            font-size: toRem(28);
            margin-bottom: toRem(24);
            .required{
                color: #FD453D;
                margin-right: toRem(8);
            }
        }
        .form{
            width: 100%;
            box-sizing: border-box;
            .title{
                margin: toRem(8) toRem(22) toRem(24) 0;
                // margin-bottom: 0;
            }
            .form-item{
                display: flex;
                align-items: center;
                margin-bottom: toRem(30);
                .checkbox{
                    flex: 1;
                }
                /deep/.checklist-box.is--tag{
                    border: none;
                    height: toRem(68);
                    min-width: toRem(88);
                    // padding: 0 toRem(30);
                    text-align: center;
                    box-sizing: border-box;
                    font-weight: 500;
                    background-color: #F6F8FC !important;
                    border-radius: toRem(8);
                    margin-top: 0;
                    .checklist-text{
                        color: #333 !important;
                        font-size: toRem(24) !important;
                    }
                    .checklist-content{
                        justify-content: space-around;
                    }
                }
                /deep/.is--tag.is-checked{
                    background-color: #FFF0F0 !important;
                    .checklist-text{
                        color: #FD453D !important;
                    }
                }
            }
        }
    }
 
</style>
